<template>
	<view>
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="main">
			<view class="title">
				<uni-icons type="arrowleft" size="20" @click="getBack"></uni-icons>
				<view class="tit">
					<view>{{introduce.course.title}}</view>
				</view>
			</view>
			<scroll-view class="scroll" scroll-y="true">
				<view class="pic">
					<image class="img" :src="introduce.course.thumb"></image>
				</view>
				<!-- tab栏组件 -->
				<Tabs :tabTitle="tabTitle" @tabStatus="tabStatus"></Tabs>
				<!-- 课程介绍 -->
				<view class="content" v-show="type === 1">
					<view class="text">
						<rich-text :nodes="introduce.course.render_desc"></rich-text>
					</view>
				</view>
				<!-- 课程目录 -->
				<view class="content" v-show="type === 2">
					<view class="list" v-for="item in introduce.chapters" :key="item.id">
						<view class="title_2">
							{{item.title}}
						</view>
						
						<view class="text_2" v-for="(value,index) in item.newarr" :key="value.id" @click="skipVideo(value)">
							<view :class="colorStyle === value.id? 'active':''">
							<text class="free" v-if="value.charge === 0">试看</text>
							{{value.title}}
							</view>
							<view class="time" :class="colorStyle === value.id? 'active':''">
								<!-- 截取空格后面所以的字符，保留前面的字符串 -->
								{{value.published_at.split(' ')[0]}}
							</view>
						</view>
					</view>

				</view>
				<view class="content" v-show="type === 3">
					<view class="pic">
						<image src="../../static/images/none.png" mode=""></image>
					</view>
				</view>
			</scroll-view>
		</view>
<courseTab :introduce="introduce" @buyCourse="buyCourse" @myIsCollect="myIsCollect"></courseTab>
	</view>
</template>

<script>
	import Tabs from '@/components/tabs'
	import courseTab from '@/components/courseTab'
	import {
		orderCouse,
		getCourseById,
		orderPay,
		courseLike
	} from '@/request/api'
	export default {
		components: {
			Tabs,
			courseTab
		},
		async onLoad(option) {
			// query测试用的id
			const {details,query} = option
			// console.log(option)
			const res = await getCourseById(details?details:query)
			// console.log(res.data.data)
			//课程介绍
			this.introduce = res.data.data
			//修改富文本的样式
			// g表示global全局搜索  i表示ignore case 忽略大小写  m 执行多行匹配
			this.introduce.course.render_desc = this.introduce.course.render_desc
				.replace(/\<img/gi, '<img style="max-width:100%;height:300px"')
				.replace(/\<p/gi, '<p style="font-size:14px;line-height:24px"')
			// .replace(/\<h5/gi, '<p style="font-size:20px;margin:10px 0";font-weight:700')
			// console.log(this.introduce.videos[22])
			//进行数据改造
			const arr = []
			//遍历对象，把对象里面的数组逐个展开拿出来，形成一个新数组
			for (const key in this.introduce.videos) {
				arr.push(...this.introduce.videos[key])
			}
			// console.log(arr)
			//遍历新数组的id，只要他的id===标题的id，那标题创建一个数组，把新数组添加进去
			arr.map(v => {
				this.introduce.chapters.map(item => {
					if (item.id === v.chapter_id) {
						if (item.newarr === undefined) item.newarr = []
						item.newarr.push(v)
					}
				})
			})
			// console.log(this.introduce,111111111)

		},
		data() {
			return {
				introduce: {},
				listData: [],
				type: 1,
				colorStyle: null,
				tabTitle: [{
						id: 1,
						name: "课程介绍",
						status: true
					},
					{
						id: 2,
						name: "课程目录",
						status: false
					},
					{
						id: 3,
						name: "讨论区",
						status: false
					}
				]
			};
		},
		methods: {
			//购买课程支付功能
			async buyCourse(){
				const token = uni.getStorageSync('mytoken') || ''
				//判断有没有token值，没有就跳到授权中心页面
				if(!token){
					uni.navigateTo({
						url:'/pages/accredits/accredits'
					})
				}
				//创建课程订单
				const res = await orderCouse({course_id: this.introduce.course.id})
				// console.log(res)
				//返回的code值，要是===1的话，那就说明课程已经购买过了
				if(res.data.code === 1){
					uni.showToast({
					    title: res.data.message+'请勿重复购买',
					    duration: 2000,
						icon:'none'
					});
					return
				}
				 const data = {
				 	  openid:uni.getStorageSync('openid'),
				 	 order_id:res.data.data.order_id
				  }
				 //获取支付的信息
				  const order = await orderPay(data)
				  const payData = order.data.data
				  //删除appid，因为支付api不需要这个参数
				  delete payData.appId
				 // console.log(payData,'购买课程')
				 // 调用官方支付的api
				 const result = await uni.requestPayment(payData)
				 console.log(result)
			},
			skipVideo(value){
				this.colorStyle = value.id
				const token = uni.getStorageSync('mytoken') || ''
				//判断有没有token值，没有就跳到授权中心页面
				if(!token){
					uni.navigateTo({
						url:'/pages/accredits/accredits'
					})
				}
				//有token值，就直接调到视频页面
				// console.log(value)
				uni.navigateTo({
					url:"./video?videoId=" + value.id
				})
			},
			//收藏事件
			async myIsCollect(v){
				console.log(this.introduce.course.id,111111111)
				this.introduce.isCollect = v
				const res = await courseLike(this.introduce.course.id)
				console.log(res)
			},
			//页面返回
			getBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			tabStatus(value) {
				this.tabTitle = value
				let id
				//拿到状态值为true的id
				this.tabTitle.forEach(v => {
					if (v.status) {
						id = v.id
					}
				})
				this.type = id
			}
		}
	}
</script>

<style lang="less" scoped>
	
.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #fff;
	}
	.main {
		
		background-color: #f2f2f2;

		.title {
			height: 80rpx;
			background-color: #fff;
			display: flex;
			align-items: center;
			padding: 0 20rpx;

			.tit {
				width: 100%;
				display: flex;
				justify-content: center;

			}
		}

		.scroll {
			height: calc(100vh - 205rpx);
			overflow-y: auto;

			.pic {
				height: 480rpx;

				.img {
					width: 100%;
					background-size: cover;
				}
			}

			.content {
				margin-top: 20rpx;
				padding: 20rpx 40rpx;
				background-color: #FFFFFF;
				
					.pic{
						width: 500rpx;
						height: 500rpx;
						margin: 0 auto;
						padding-bottom: 90rpx;
						image{
							width: 100%;
							height: 100%;
						}
					}
				
				.list {
					
					.title_2 {
						margin: 10rpx 0;
						font-size: 28rpx;
						font-weight: 700;

					}
					
					.text_2 {
						display: flex;
						justify-content: space-between;
						margin: 60rpx 0;
						font-size: 28rpx;
						color: #666;
						.active{
							 color:#239bf1 ;
						}
						.free{
							margin-right: 20rpx;
							padding: 5rpx 20rpx;
							background-color: #239bf1;
							border-radius: 30rpx;
							font-size: 22rpx;
							color: #fff;
						}
					}
				}
			}
		}

	}
</style>
